<template>
  <div>
    <el-input v-model="search" placeholder="输入关键字搜索" />
    <el-button type="primary" @click="openAdd">添加门店</el-button>
    <el-dialog
      title="添加门店"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="newArr.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model.number="newArr.address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newArr.telephone"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input
            type="textarea"
            :rows="2"
            v-model="newArr.desc"
            placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item label="上架商品">
          <el-checkbox-group @change="goodsChange" v-model="newGoodsStu">
            <el-checkbox
              v-for="(item, index) in goodsStu"
              :label="item._id"
              :key="index"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="服務">
          <el-checkbox-group @change="serverChange" v-model="newServerStu">
            <el-checkbox
              v-for="(item, index) in serverStu"
              :label="item._id"
              :key="index"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sureAdd">确认添加</el-button>
        <el-button type="primary" @click="close">取 消</el-button>
      </span>
    </el-dialog>

    <el-table
      :data="
        shopsStu.rows.filter(
          (data) =>
            !search ||
            data.name.toLowerCase().includes(search.toLowerCase()) ||
            data.address.toLowerCase().includes(search.toLowerCase())
        )
      "
      border
      style="width: 100%"
    >
      <el-table-column label="店名" prop="name"> </el-table-column>
      <el-table-column label="地址" prop="address"> </el-table-column>
      <el-table-column label="电话" prop="telephone"> </el-table-column>
      <el-table-column label="描述" prop="desc"> </el-table-column>
      <el-table-column label="上架商品" prop="goodsId">
        <template slot-scope="scope">
          <el-tag
            v-for="(item, index) in scope.row.goodsId"
            :key="index"
            type="danger"
            >{{ item.name }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="上架商品" prop="servicesId">
        <template slot-scope="scope">
          <el-tag
            v-for="(item, index) in scope.row.servicesId"
            :key="index"
            type="danger"
            >{{ item.name }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="isAvail" label="是否通过审核">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isAvail == 0" type="danger">未通过</el-tag>
          <el-tag v-else-if="scope.row.isAvail == 1" type="info">申请中</el-tag>
          <el-tag v-else type="success">已通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="applytype" label="是否通过注銷">
        <template slot-scope="scope">

          <el-tag
            v-if="scope.row.applytype == 0"
            type="success"
            @click="apply(scope.$index, scope.row)"
            >未注銷</el-tag
          >
          <el-tag v-else type="infor" @click="apply(scope.$index, scope.row)"
            >已注銷</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.applytype == 0&&scope.row.isAvail==2"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" v-else disabled>编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.applytype == 0&&scope.row.isAvail==2"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="danger" v-else disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template>
      <div class="block">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :page-sizes="[4, 10, 15]"
          :page-size="4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="shopsStu.total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      search: "",
      newArr: {
        name: "", // 店名
        address: "", // 地址
        telephone: "", // 电话
        desc: "", // 描述
        adminId: "", // 所属门店管理员id
        goodsId: [], // 该门店下的商品id
        servicesId: [], // 该门店下的服务id
        isAvail: 1, // 门店申请是否通过审核（0：未通过；1：申请中；2：已通过）
        applytype: 0
      },
      falter: false,
      newGoodsStu: [],
      newServerStu: [],
      stu: [],
      _id: ""
    };
  },
  methods: {
    openAdd() {
      this.centerDialogVisible = true;

      this.newArr.name = ""; // 店名
      this.newArr.address = ""; // 地址
      this.newArr.telephone = ""; // 电话
      this.newArr.desc = ""; // 描述
      this.newArr.goodsId = []; // 该门店下的商品id
      this.newArr.servicesId = []; // 该门店下的服务id
    },
    dleImg(index) {
      this.newArr.images.splice(index, 1);
    },
    apply(index, row) {
      if (row.applytype == 1) {
        row.isAvail = 2;
        row.applytype = 0;
        this.$message({
          message: `${row.name} 已經重新上架`,
          type: "warning"
        });
      } else {
        row.isAvail = 1;
        row.applytype = 1;
        this.$message({
          message: `${row.name} 已經注銷`,
          type: "warning"
        });
      }
      this.$store.commit("shops/udtStu", row);
    },
    sureAdd() {
      if (this.falter) {
        this.newArr._id = this._id;
        this.$store.commit("shops/udtStu", this.newArr);
        console.log(this.newArr);
        this.centerDialogVisible = false;
        this.falter = true;
      } else {
        this.$store.commit("shops/addStu", this.newArr);
        this.centerDialogVisible = false;
      }
    },
    sizeChange(val) {
      this.$store.dispatch("shops/get", { id: "", current: "", size: val });
    },
    currentChange(val) {
      this.$store.dispatch("shops/get", { id: "", size: "", current: val });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleEdit(index, row) {
      this.newArr.name = row.name;
      this.newArr.address = row.address;
      this.newArr.telephone = row.telephone;
      this.newArr.desc = row.desc;
      this.newArr.adminId = row.adminId;
      this.newArr.goodsId = row.goodsId;
      this.newArr.servicesId = row.servicesId;
      this.newArr.isAvail = row.isAvail;
      this.newArr.applytype = row.applytype;
      this._id = row._id;
      let goods = [];
      let server = [];
      row.goodsId.map(item => {
        goods.push(item._id);
      });
      this.newGoodsStu = goods;
      row.servicesId.map(item => {
        server.push(item._id);
      });
      this.newServerStu = server;
      this.falter = true;
      this.centerDialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(11232143134,row._id);
      
      this.$store.commit("shops/dltStu", row._id);
      let id = "";
      let admid = localStorage.getItem("Jurisdiction");
      if (admid == 2) {
        id = localStorage.getItem("ID");
        this.newArr.adminId = id;
      }
      this.$store.dispatch("goods/get", { id: id, size: "1000", current: "" });
      this.$store.dispatch("shops/get", { id: id, size: "", current: "" });
      this.$store.dispatch("server/get", { id: id, size: "1000", current: "" });
    },
    close() {
      this.centerDialogVisible = false;
    },
    serverChange(value) {
      this.newArr.servicesId = value;
    },
    goodsChange(value) {
      this.newArr.goodsId = value;
    }
  },
  computed: {
    shopsStu() {
      return this.$store.getters.shopsStu;
    },
    goodsStu() {
      return this.$store.getters.goodsStu.rows;
    },
    serverStu() {
      return this.$store.getters.serverStu.rows;
    }
  },
  created() {
    // console.log(1231321,this.$store.getters);
    let id = "";
    let admid = localStorage.getItem("Jurisdiction");
    if (admid == 2) {
      id = localStorage.getItem("ID");
      this.newArr.adminId = id;
    }
    this.$store.dispatch("goods/get", { id: id, size: "1000", current: "" });
    this.$store.dispatch("shops/get", { id: id, size: "", current: "" });
    this.$store.dispatch("server/get", { id: id, size: "1000", current: "" });
  }
};
</script>

<style>
</style>